
<!-- 
    登录，只与ElementPlus组件有关，与其他组件无关
 -->

<script>
import { useUserStore } from '@/store/user'
import getImageUrl from '@/utils/getImageUrl.js'
// export
export default {
    name: 'Login',
    data() {
        return {
            loginTitle: "酒店房客管理系统",
            toIndexImageUrl: "/img/github.png",
            getImageUrl: getImageUrl,
            form: {
                userName: '',
                userPassword: ''
            },
            rules: {
                userName: { required: true, message: '请输入用户名', trigger: 'blur' },
                userPassword: { required: true, message: '请输入密码', trigger: 'blur' }
            },
        }
    },
    methods: {
        login() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$http.post(
                        '/user/login',
                        {
                            userName: this.form.userName,
                            userPassword: this.form.userPassword
                        }
                    ).then(res => res.data)
                        .then(res => {
                            console.log(res)
                            if (res.code === 0) {
                                let userStore = useUserStore()
                                userStore.setCurrentUser(res.data.user)
                                // console.log(res.data.user)
                                userStore.setUserMenus(res.data.menus)
                                this.$router.push('/')
                                this.$message.success("登录成功")
                                return true
                            } else {
                                this.$message.warning("账号密码错误");
                                return false
                            }
                        })
                } else {
                    console.log('error submit!!')
                    return false
                }
            });
        }
    }
}
</script>


<template>
    <div id="login">
        <el-menu mode="horizontal" :ellipsis="false" router>
            <div @click="$router.push({ path: '/' })">
                <img style="width: 70px" :src="getImageUrl(toIndexImageUrl)" alt="logo" />
            </div>
        </el-menu>
        <div class="main-contain">

            <div class="login-title">
                <h1>{{ loginTitle }}</h1>
            </div>

            <el-form :model="form" :rules="rules" ref="form" status-icon>

                <el-form-item prop="userName">
                    <el-input v-model="form.userName" placeholder="用户名" autofocus tabindex="1" prefix-icon="UserFilled">
                    </el-input>
                </el-form-item>

                <el-form-item prop="userPassword">
                    <el-input v-model="form.userPassword" show-password placeholder="密码" prefix-icon="UserFilled"
                        type="password" tabindex="2" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="login" tabindex="3" style="width: 50%; margin: 0 auto;">登录</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>


<style scoped>
/* @import "../assets/packages/login/login.css"; */
.main-contain {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    margin-top: 50px;
}

.main-contain .login-title {
    text-align: center;
    margin-bottom: 20px;
}
</style>